<template>
  <div class="login-container">
    <div class="loginbox">
      <el-form :model="loginForm" :rules="formInfoRules" status-icon ref="loginFormRef" label-position="left" label-width="0px" class="demo-ruleForm login-page">
        <img src="@/assets/images/login/logo.png" class="logo" alt="" />
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名">
            <i class="iconfont iconzhanghao fontsize" :class="loginForm.username == '' ? '' : 'iconactive'"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码">
            <i class="iconfont iconmima fontsize" :class="loginForm.password == '' ? '' : 'iconactive'"></i>
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item prop="validatecode">
              <el-input type="validatecode" v-model="loginForm.validatecode" auto-complete="off" placeholder="验证码" @keydown.enter="handleSubmit" maxlength="4" minlength="4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="code-box">
            <img :src="imgUrl" alt class="codeimg" @click="getValidateCode()" />
          </el-col>
        </el-row>
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%" @click="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
export default {
  data() {
    return {
      logining: false,
      imgUrl: null,
      //表单对象，由Form结尾
      loginForm: {
        username: "",
        password: "",
        validatecode: null
      },
      //验证对象，由Rules结尾
      formInfoRules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        validatecode: [{ required: true, min: 4, max: 4, message: "验证码长度为4", trigger: "blur" }]
      },
      checked: false
    };
  },
  /**
   * html加载完成之前，执行。执行顺序：父组件-子组件
   */
  created() {
    this.$TOOL.data.remove("AUTH_INFO")
    this.$TOOL.data.remove("MENU")
    this.$TOOL.data.remove("PERMISSIONS")
  },
  /**
   * 页面初始化方法[html加载完成后执行。执行顺序：子组件-父组件]
   */
  mounted() {
    //获取验证码
    this.getValidateCode();
  },
  methods: {
    //获取验证码
    getValidateCode() {
      var par = {
        uniqueIdentifier: this.$TOOL.getUniqueIdentifier()
      };
      this.$API.login.loadValidateCode.get(par).then(response => {
        let data = response.data;
        if (response.code === 200) {
          this.imgUrl = "data:image/jpg;base64," + data.fileContents;
        } else {
          this.$Message.warning(response.msg);
        }
      });
    },
    //点击登录
    async handleSubmit() {
      this.logining = true;
      var validate = await this.$refs.loginFormRef.validate().catch(() => { })
      if (!validate) {
        return false
      }
      //登录，获取授权信息
      var par = {
        userName: this.loginForm.username,
        password: md5(this.loginForm.password).toUpperCase(),
        vialdcode: this.loginForm.validatecode,
        uniqueIdentifier: this.$TOOL.getUniqueIdentifier(),
        appSecret: this.$CONFIG.APP_NAME,
      };
      var response = await this.$API.login.userLogin.post(par);
      if (response.code === 200) {
        this.$TOOL.data.set("AUTH_INFO", response.data);
        this.logining = false;
        //获取可操作性菜单和权限码
        var menuPar = {
          userName: response.data.userName,
          platform: this.$CONFIG.PLATFORM,
        };
        var reMenuInfo = await this.$API.menu.getMenuByUser.get(menuPar);
        if (reMenuInfo.code === 200) {
          this.$TOOL.data.set("MENU", reMenuInfo.data.userMenus);
          this.$TOOL.data.set("PERMISSIONS", reMenuInfo.data.userPermissions);
          this.$router.replace({ path: '/' });
        } else {
          this.$Message.warning(reMenuInfo.msg);
        }
      } else {
        this.logining = false;
        this.$Message.warning(response.msg);
      }
    }
  }
};
</script>
<style scoped>
.login-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/images/login/bg.png") no-repeat;
  background-size: 100%;
}

.loginbox {
  position: absolute;
  width: 60%;
  height: 56%;
  left: 20%;
  top: 22%;
  background: url("../../assets/images/login/login.png") no-repeat;
  background-size: 100%;
}

.login-page {
  position: absolute;
  right: 160px;
  top: 50px;
}

.logo {
  margin-bottom: 50px;
}

.codeimg {
  height: 40px;
  margin-left: 20px;
}

.fontsize {
  font-size: 22px;
  padding: 0 5px;
}

.iconactive {
  color: #0067ff;
}
.login-container .el-input__inner {
  background: #f6f6f6;
  height: 46px;
  line-height: 46px;
  border-radius: 10px;
  border: 1px solid #f6f6f6;
  padding-left: 45px;
}
.login-container .el-input__inner:focus {
  outline: none;
  border-color: #0067ff;
}
.login-container .el-input__prefix {
  left: 10px;
}
</style>
